<template>
  <div class="main-box">
    <NavigationBar/>
    <Advertisement/>
    <div class="latest-and-recommended">
      <div class="latest">
        <div class="latest-title">
          <NewestTitle titleText="最新文章" />
          </div>
        <div class="latest-content">
          <div><Newest/></div>
          <div><Newest/></div>
        </div>

        <div class="author-you-follow-title">
          <NewestTitle titleText="你关注的作者更新了" barWidth="300px" />
        </div>
        <div class="author-you-follow-content">
          <div><AuthorYouFollow/></div>
          <div><AuthorYouFollow/></div>
        </div>

        <div>
          <CarouseMapO/>
        </div>

      </div>
      <div class="recommended"><Recommend/><AdvertisementT/></div>
    </div>

    <div class="newsSingleImgTitleListDom">
      <div class="firstNewsSingleImgTitle">
        <NewsSingleImgTitle/>
        <NewsSingleImgTitle/>
        <NewsSingleImgTitle/>
      </div>
      <div class="secondNewsSingleImgTitle">
        <NewsSingleImgTitle/>
        <NewsSingleImgTitle/>
        <NewsSingleImgTitle/>
      </div>
    </div>
  </div>
</template>

<script>
import NavigationBar from "./NavigationBar.vue"
import Advertisement from "./advertisement.vue"
import Newest from "./Newest.vue"
import Recommend from './Recommend.vue'
import NewestTitle from './NewestTitle.vue'
import AuthorYouFollow from './AuthorYouFollow.vue'
import NewsSingleImgTitle from './NewsSingleImgTitle.vue'
import CarouseMapO from './CarouselMapO.vue'
import AdvertisementT from './AdvertisementT.vue'

export default {
  name: "Main",
  components: {
    NavigationBar, Advertisement, Newest, Recommend, NewestTitle, AuthorYouFollow, 
    NewsSingleImgTitle, CarouseMapO, AdvertisementT
  },
  methods: {
    scrollToTop() {
      window.scrollTo(0, 0)
    }
  },
  mounted() {
    this.scrollToTop()
  }
}
</script>

<style scoped>
.main-box {
    display: inline-flex;
    flex-direction: column;  /* 改为垂直排列 */
    justify-content: center; /* 垂直方向居中（主轴） */
    align-items: center;     /* 水平方向居中（交叉轴） */
}
.latest-and-recommended {
  margin-top: 30px;
  /* background-color: red; */

  display: inline-flex;
  justify-content: center; /* 垂直方向居中（主轴） */
  align-items: flex-start;     /* 水平方向居中（交叉轴） */

  gap: 23px;
}
.latest {
  display: inline-flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向居中（主轴） */
  align-items: flex-start;     /* 水平方向居中（交叉轴） */
  gap: 15px;
}
.latest-title {
  font-size: 20px;
  color: #ff4d4f;
  font-weight: bold;
  margin-top: 13px;
}
.latest-content {
  display: inline-flex;
  justify-content: center; /* 垂直方向居中（主轴） */
  align-items: flex-start;     /* 水平方向居中（交叉轴） */
  gap: 30px;
}
.author-you-follow-content {
  display: inline-flex;
  justify-content: center; /* 垂直方向居中（主轴） */
  align-items: flex-start;     /* 水平方向居中（交叉轴） */
  gap: 30px;
}
.recommended {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between; /* 垂直方向居中（主轴） */
  align-items: flex-start;     /* 水平方向居中（交叉轴） */
}
.newsSingleImgTitleListDom {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between; /* 垂直方向居中（主轴） */
  align-items: flex-start;     /* 水平方向居中（交叉轴） */
}
.firstNewsSingleImgTitle, .secondNewsSingleImgTitle {
  margin-top: 30px;
  display: inline-flex;
  justify-content: center; /* 垂直方向居中（主轴） */
  align-items: flex-start;     /* 水平方向居中（交叉轴） */
  gap: 68px;
}
</style>